// vue.config.js

const path = require('path');
const BundleAnalyzerPlugin =
	require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
	// 部署应用包时的基本 URL，默认值是 '/'
	// 如果你的应用部署在子路径下，例如 https://example.com/my-app/，则应设置为 '/my-app/'
	publicPath:
		process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',

	// 当运行 vue-cli-service build 时生成的生产环境构建文件的目录
	outputDir: 'dist',

	// 放置生成的静态资源（js、css、img、fonts）的目录
	assetsDir: 'static',

	// 指定生成的 index.html 的输出路径（相对于 outputDir）
	indexPath: 'index.html',

	// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
	// 设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告
	// 设置为 'error' 时，eslint-loader 会将 lint 错误输出为编译错误
	lintOnSave: process.env.NODE_ENV !== 'production',

	// 是否使用包含运行时编译器的 Vue 构建版本
	// 设置为 true 后，你就可以在 Vue 组件中使用 template 选项
	runtimeCompiler: false,

	// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件
	// 如果你想要通过 Babel 显式转译一个依赖，可以在这里列出来
	transpileDependencies: [],

	// 生产环境的 source map，可以将其设置为 false 以加速生产环境构建
	productionSourceMap: false,

	// 配置 webpack-dev-server 行为
	devServer: {
        hot: true,
		// 指定开发服务器的主机名
		host: 'localhost',
		// 指定开发服务器的端口号
		port: 8080,
		// 是否自动打开浏览器
		open: true,
		// 代理配置，用于解决跨域问题
		proxy: {
			// 当请求以 /api 开头时，将请求代理到目标服务器
			'/api': {
				// 目标服务器的地址
				target: 'http://api.example.com',
				// 是否将主机头的源更改为目标 URL
				changeOrigin: true,
				// 路径重写，将 /api 替换为空字符串
				pathRewrite: { '^/api': '' },
			},
		},
	},

	// 调整内部的 webpack 配置
	configureWebpack: {
		// 配置别名，方便引入模块
		resolve: {
			alias: {
				'@': path.resolve(__dirname, 'src'),
			},
		},
		// 插件配置
		plugins: [
			// 用于分析打包后的文件大小和模块依赖关系
			new BundleAnalyzerPlugin(),
		],
	},

	// 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例
	// 允许对内部的 webpack 配置进行更细粒度的修改
	chainWebpack: (config) => {
		// 设置 svg-sprite-loader
		config.module
			.rule('svg')
			.exclude.add(path.resolve(__dirname, 'src/icons'))
			.end();
		config.module
			.rule('icons')
			.test(/\.svg$/)
			.include.add(path.resolve(__dirname, 'src/icons'))
			.end()
			.use('svg-sprite-loader')
			.loader('svg-sprite-loader')
			.options({
				symbolId: 'icon-[name]',
			})
			.end();
	},

	// CSS 相关配置
	css: {
		// 是否将组件中的 CSS 提取到一个独立的 CSS 文件中
		extract: process.env.NODE_ENV === 'production',
		// 是否为 CSS 开启 source map
		sourceMap: false,
		// 为预处理器 loader 传递选项
		loaderOptions: {
			less: {
				// 这里可以添加 less 相关的配置
				// 例如：modifyVars: { 'primary-color': '#1DA57A' }
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: {
            'primary-color': '#409EFF', // 默认 Element 主色
          }
        }
			},
		},
	},

	// 可以用来传递任何第三方插件选项
	pluginOptions: {
		// 示例：使用某些自定义插件时的配置
		// myPlugin: {
		//   option1: 'value1',
		//   option2: 'value2'
		// }
	},
};
